<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { GroupsPage, CameraWorker, LatinName, queryByInput, InvalidPhotosInfo, multipleSave, delStarsImage, identifyInfo, cameraidentifyInfo, delImg, updateImageGroup, StarsImage } from '@/utils/api.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import wlsCollect from '@/components/common/wls-collect.vue'
import lms from '@/assets/images/moreImg.png'
const route = useRoute();
const router = useRouter();
let mobile = ''
let areaId = ''
let zhName = ''
let groupId = ''
let lytype = '';
let imgInx = 0;
let Worker = [];
let options = [];
let grp = false
let isempty = true

const coll = ref(null);
const loading = ref(false);
let ioindex = 0;
let allifoxl = [];
const ifox = ref(0);
const allifox = ref(0);
const yml = ref(0);
const imglist = ref([]);
const imgObj = ref({});
const checked1 = ref(false);
const speciesList = ref([]);

const total = ref([]);
let startIndex = 0; // 初始索引位置

const load = () => {
    if (startIndex < total.value.length) {
        const newItems = total.value.slice(startIndex, startIndex + 5);
        startIndex += 5;
        imglist.value = [...imglist.value, ...newItems];
    }
    else {
        ElMessage({
            message: '文件已经全部加载完毕',
            type: 'success',
        })
    }
}

const moveImg = () => {
    let str = '是否将该文件移除当前分组. 继续?'
    if (imgInx == imglist.value.length - 1 && imglist.value.length == 1 && !grp) {
        str = '这是本组最后一张照片，移除后将自动返回鉴定分组页面，是否继续?'
    }

    if (imgInx == imglist.value.length - 1 && imglist.value.length == 1 && grp) {
        str = '这是本组最后一张照片，移除后将自动跳下个分组，是否继续?'
    }

    if (imgInx == imglist.value.length - 1 && imglist.value.length == 1 && grp && allifox.value == 1) {
        str = '这是最后一组的最后一张照片，移除后将自动返回鉴定页面，是否继续?'
    }

    ElMessageBox.confirm(
        str,
        '提示',
        {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
        }
    )
        .then(() => {
            updateImageGroup(imglist.value[imgInx].id).then(res => {
                if (res.code == '200') {
                    ElMessage({
                        type: 'success',
                        message: res.message
                    })
                    imglist.value.splice(imgInx, 1);

                    if (imglist.value.length == 0 && !grp) {
                        window.sessionStorage.removeItem('groupId');
                        router.go(-1);
                        return false
                    };

                    if (imglist.value.length == 0 && grp) {
                        getidentifyInfos()
                        return false
                    };

                    if (imglist.value.length == 0 && grp && allifox.value == 1) {
                        window.sessionStorage.removeItem('groupId');
                        router.go(-1);
                        return false
                    };

                    getidentifyInfos();


                    if (imgInx == imglist.value.length && imglist.value.length > 0) {
                        imgInx--;
                        imgObj.value = imglist.value[imgInx];
                        deassignData(imgObj.value);
                    } else {
                        imgObj.value = imglist.value[imgInx];
                        deassignData(imgObj.value);
                    }
                } else {
                    ElMessage({
                        message: res.message,
                        type: 'warning',
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消剔除'
            })
        })
}

const delaim = () => {
    let str = '是否将该文件删除. 继续?'
    if (imgInx == imglist.value.length - 1 && imglist.value.length == 1 && !grp) {
        str = '这是本组最后一张照片，删除后将自动返回鉴定分组页面，是否继续?'
    }

    if (imgInx == imglist.value.length - 1 && imglist.value.length == 1 && grp) {
        str = '这是本组最后一张照片，删除后将自动跳下个分组，是否继续?'
    }

    if (imgInx == imglist.value.length - 1 && imglist.value.length == 1 && grp && allifox.value == 1) {
        str = '这是最后一组的最后一张照片，删除后将自动返回鉴定页面，是否继续?'
    }

    ElMessageBox.confirm(
        str,
        '提示',
        {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
        }
    )
        .then(() => {
            let params = '?id=' + imglist.value[imgInx].id + '&userName=' + zhName;
            delImg(params).then(res => {
                if (res.code == '200') {
                    ElMessage({
                        type: 'success',
                        message: res.message
                    })
                    imglist.value.splice(imgInx, 1);

                    if (imglist.value.length == 0 && !grp) {
                        window.sessionStorage.removeItem('groupId');
                        router.go(-1);
                        return false
                    };

                    if (imglist.value.length == 0 && grp) {
                        getidentifyInfos()
                        return false
                    };

                    if (imglist.value.length == 0 && grp && allifox.value == 1) {
                        window.sessionStorage.removeItem('groupId');
                        router.go(-1);
                        return false
                    };

                    getidentifyInfos();

                    if (imgInx == imglist.value.length && imglist.value.length > 0) {
                        imgInx--;
                        imgObj.value = imglist.value[imgInx];
                        deassignData(imgObj.value);
                    } else {
                        imgObj.value = imglist.value[imgInx];
                        deassignData(imgObj.value);
                    }
                } else {
                    ElMessage({
                        message: res.message,
                        type: 'warning',
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除'
            })
        })
}

const getidentifyInfo = async () => {
    let res;
    if (lytype == '实时相机') {
        res = await identifyInfo(areaId)
    } else {
        res = await cameraidentifyInfo(areaId)
    }

    if (res.code == '200') {
        allifoxl = res.data;
        ifox.value = allifoxl.indexOf(groupId) + 1;
        ioindex = allifoxl.indexOf(groupId);
        allifox.value = allifoxl.length;
    }
}

const getidentifyInfos = async () => {
    let res;
    if (lytype == '实时相机') {
        res = await identifyInfo(areaId)
    } else {
        res = await cameraidentifyInfo(areaId)
    }
    if (res.code == '200') {
        allifoxl = res.data;
        allifox.value = allifoxl.length;
        if (ioindex == allifoxl.length - 1) {
            ioindex--;
        }
        getGroupsPageG(allifoxl[ioindex]);
    }
}

const Previousgroup = () => {
    if (ioindex > 0) {
        ioindex--;
        ifox.value--;
        window.sessionStorage.setItem('groupId', allifoxl[ioindex])
        getGroupsPageG(allifoxl[ioindex]);
    } else {
        ElMessage({
            message: '已经是第一组了',
            type: 'warning',
        })
    }
}

const Nextgroup = () => {
    if (ioindex < allifox.value - 1) {
        ioindex++;
        ifox.value++;
        window.sessionStorage.setItem('groupId', allifoxl[ioindex]);
        getGroupsPageG(allifoxl[ioindex]);
    } else {
        ElMessage({
            message: '已经是最后一张了',
            type: 'warning',
        })
    }
}

const formatProcessingTime = (data) => {
    if (data != null && data != '') {
        let datetime = new Date(data);
        let year = datetime.getFullYear();
        let month = datetime.getMonth() + 1;
        let date = datetime.getDate();
        let Hours = datetime.getHours();
        let Minutes = datetime.getMinutes();
        let Seconds = datetime.getSeconds();

        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
            date = "0" + date;
        }
        if (Hours >= 1 && Hours <= 9) {
            Hours = "0" + Hours;
        }
        if (Minutes >= 0 && Minutes <= 9) {
            Minutes = "0" + Minutes;
        }
        if (Seconds >= 1 && Seconds <= 9) {
            Seconds = "0" + Seconds;
        }
        return year + "-" + month + "-" + date + " " + Hours + ":" + Minutes + ":" + Seconds;
    } else {
        return ""
    }
}

const submitms = async (data) => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    });
    let params = JSON.parse(JSON.stringify(imgObj.value));

    params.speciesList = JSON.parse(JSON.stringify(speciesList.value));
    let shouldBreak = true; // 标志变量
    for (let i = 0; i < params.speciesList.length; i++) {
        if ((params.speciesList[i].speciesName == '' || params.speciesList[i].speciesName == null) && !checked1.value) {
            shouldBreak = false;
            loading.close();
            ElMessage({
                message: '物种名不能为空',
                type: 'warning',
            })
            break; // 当元素值等于 3 时跳出循环
        }
    }
    if (shouldBreak) {
        params.aloneAuthenticate = data;

        if (checked1.value) {
            let arr = [{ speciesName: '无法鉴定', animalNum: "1" }]
            params.speciesList = arr;
        }
        params.shootingTime = formatProcessingTime(params.shootingTime);
        let res = await multipleSave(params)
        loading.close();
        if (res.code == '200') {
            if (isempty) {
                UpdateGP();
            } else {
                getInvalidPhotosInfo()
            }

            ElMessage({
                message: '已鉴定',
                type: 'success',
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    }
}

const getCameraWorker = async () => {
    let res = await CameraWorker(areaId)
    if (res.code == '200') {
        Worker = res.data;
    }
};

const Previous = () => {
    if (imgInx > 0) {
        imgInx--;
        imgObj.value = imglist.value[imgInx];
        deassignData(imgObj.value);
    } else {
        ElMessage({
            message: '已经是第一张了',
            type: 'warning',
        })
    }

}

const NextPicture = () => {
    if (imgInx < imglist.value.length - 1) {
        imgInx++;
        imgObj.value = imglist.value[imgInx];
        deassignData(imgObj.value);
    } else {
        ElMessage({
            message: '已经是最后一张了',
            type: 'warning',
        })
    }

}

const preSin = (data, x) => {
    imgInx = x;
    imgObj.value = data;
    deassignData(imgObj.value);

}

const remoteMethod = (query) => {
    if (query) {
        queryByInput(query).then(res => {
            if (res.code == '200') {
                loading.value = true
                setTimeout(() => {
                    loading.value = false
                    options = res.data.filter((item) => {
                        return item.toLowerCase().includes(query.toLowerCase())
                    })
                }, 200)
            }
        })
    } else {
        options = []
    }
}

const handleSelects = (item, index) => {
    console.log(1);
    getLatinNames(item, index)
};

const UpdateGP = async () => {
    checked1.value = false;
    let params = '?groupId=' + groupId + '&mobile=' + mobile;
    let res = await GroupsPage(params)
    if (res.code == '200') {
        // imglist.value = res.data;
        startIndex = 5;
        total.value = res.data;
        imglist.value = total.value.slice(0, 5);
        imgObj.value = res.data[imgInx];
    }
}

const UpdateGPs = async () => {

    let params = '?groupId=' + groupId + '&mobile=' + mobile;
    let res = await GroupsPage(params)
    if (res.code == '200') {
        // imglist.value = res.data;
        startIndex = 5;
        total.value = res.data;
        imglist.value = total.value.slice(0, 5);
        imgObj.value = res.data[imgInx];
    }
}

const getInvalidPhotosInfo = async () => {
    let params = '?id=' + route.query.id + '&mobile=' + mobile;
    let res = await InvalidPhotosInfo(params)
    if (res.code == '200') {
        // imglist.value = res.data
        startIndex = 5;
        total.value = res.data;
        imglist.value = total.value.slice(0, 5);
        yml.value = imglist.value.length * 1.7;
        imgObj.value = res.data[0];
        deassignData(res.data[0]);
    }
}

const getGroupsPage = async () => {
    let params = '?groupId=' + groupId + '&mobile=' + mobile;
    let res = await GroupsPage(params)
    if (res.code == '200') {
        // imglist.value = res.data

        startIndex = 5;
        total.value = res.data;
        imglist.value = total.value.slice(0, 5);

        yml.value = imglist.value.length * 1.7;
        imgObj.value = res.data[0];
        deassignData(res.data[0]);
    }
}

const getGroupsPageG = async (dataid) => {
    let params = '?groupId=' + dataid + '&mobile=' + mobile;
    let res = await GroupsPage(params)
    if (res.code == '200') {

        startIndex = 5;
        total.value = res.data;
        imglist.value = total.value.slice(0, 5);

        // imglist.value = res.data
        yml.value = imglist.value.length * 1.7;
        imgObj.value = res.data[0];
        deassignData(res.data[0]);
    }
}

const deassignData = (data) => {
    let sl = JSON.parse(JSON.stringify(data)).speciesList;
    sl.forEach(e => {
        e['lan'] = '';
    });
    speciesList.value = sl;
    speciesList.value.forEach((e, x) => {
        getLatinNames(e.speciesName, x)
    })
    if (data.identifyPeople == null) {
        data.identifyPeople = zhName;
    }
}

const getLatinNames = async (data, x) => {
    let res = await LatinName(data)
    if (res.code == '200') {
        speciesList.value[x].lan = res.data;
    }
}

const addsn = () => {
    let z = {
        "speciesName": '',
        "animalNum": 1
    }
    speciesList.value.push(z)
}

const deljdwz = (data, index) => {
    speciesList.value.splice(index, 1)
}

const collcr = () => {
    if (imgObj.value.starsStatus == 0) {
        coll.value.open()
    } else {
        let str = '是否取消收藏该文件. 继续?'
        ElMessageBox.confirm(
            str,
            '提示',
            {
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'warning',
            }
        )
            .then(() => {
                let params = '?id=' + imgObj.value.id + '&areaId=' + areaId + '&mobile=' + mobile;
                delStarsImage(params).then(res => {
                    if (res.code == '200') {
                        ElMessage({
                            type: 'success',
                            message: '取消收藏成功'
                        })
                        if (isempty) {
                            UpdateGPs();
                        } else {
                            getInvalidPhotosInfo()
                        }

                    }
                })
            })
            .catch(() => {

            })
    }

}

const iscollect = (data) => {
    let params = {
        "folderId": data,
        "imageId": imgObj.value.id
    }
    StarsImage(params).then(res => {
        if (res.code == '200') {
            if (isempty) {
                UpdateGPs();
            } else {
                getInvalidPhotosInfo()
            }
            coll.value.close()
        }
    })
}

const goback = () => {
    window.sessionStorage.removeItem('groupId');
    router.go(-1)
}

onMounted(() => {
    mobile = window.sessionStorage.getItem('mobile');
    zhName = window.sessionStorage.getItem('zhName');
    areaId = window.sessionStorage.getItem('areaId');

    lytype = route.query.name;

    // if(route.query.group)
    if (route.query.group != undefined) {
        grp = true;
        getidentifyInfo();
    }
    if (window.sessionStorage.getItem('groupId') == null) {
        groupId = route.query.groupId;
    } else {
        groupId = window.sessionStorage.getItem('groupId');
    }

    if (route.query.empt == undefined) {
        getGroupsPage();
    } else {
        isempty = false;
        getInvalidPhotosInfo()
    }
    getCameraWorker();
});

onBeforeRouteLeave((to, from, next) => {
    // 在进入路由之前执行的逻辑操作
    // 可以进行一些权限验证、数据加载等操作
    let oldPath = to.path.split('/');
    let newPath = from.path.split('/')[1];
    if (oldPath.indexOf(newPath) == -1) {
        window.sessionStorage.removeItem('hisa');
    }
    next()
});

</script>

<template>
    <div class="wls-authenticate">
        <!-- 标题 B-->
        <div class="wls-authenticate-title">
            <div class="wls-authenticate-title-txt">
                <span>{{ route.query.name }}</span>
                <span class="icon iconfont icon-xiala"></span>
                <span>鉴定</span>
            </div>
            <el-button @click.stop="goback()">返回</el-button>
        </div>
        <!-- 标题 E-->
        <div class="wls-authenticate-container">
            <div class="wls-authenticate-container-left bcb">
                <div class="wls-authenticate-container-left-img" :style="grp ? '' : 'height: 6.5rem'">
                    <div class="wls-authenticate-container-left-btn">
                        <div class="wls-collect" @click.stop="collcr">
                            <i class="icon iconfont icon-shoucang"
                                :style="imgObj.starsStatus == 0 ? '' : 'color:#FCD60F'"></i>
                            <span>收藏</span>
                        </div>
                        <div @click.stop="delaim">
                            <svg class="wls-icon" aria-hidden="true">
                                <use xlink:href="#icon-shanchu"></use>
                            </svg>
                            <span>删除</span>
                        </div>
                        <div @click.stop="moveImg" v-if="isempty">
                            <svg class="wls-icon" aria-hidden="true">
                                <use xlink:href="#icon-tichufenzu"></use>
                            </svg>
                            <span>剔除分组</span>
                        </div>
                    </div>

                    <!-- <div class="wls-authenticate-container-left-arrows" @click.stop="Previous()" style="left: 0.08rem;">
                        <svg class="wls-icon" style="width: 0.4rem;height: 0.4rem;" aria-hidden="true">
                            <use xlink:href="#icon-shangyizhang"></use>
                        </svg>
                    </div>
                    <div class="wls-authenticate-container-left-arrows" @click.stop="NextPicture()" style="right: 0.16rem;">
                        <svg class="wls-icon" style="width: 0.4rem;height: 0.4rem;" aria-hidden="true">
                            <use xlink:href="#icon-xiayizhang"></use>
                        </svg>
                    </div> -->

                    <video v-if="$wlsf.filiv(imgObj.accessorySrc) == 4" controls
                        :src="imgObj.discernPath == null ? imgObj.accessorySrc : imgObj.discernPath"></video>
                    <el-image v-else style="width: 100%; height: 100%"
                        :src="imgObj.discernPath == null ? imgObj.accessorySrc : imgObj.discernPath" :zoom-rate="1.2"
                        :max-scale="7" :min-scale="0.2"
                        :preview-src-list="[imgObj.discernPath == null ? imgObj.accessorySrc : imgObj.discernPath]"
                        :initial-index="0" fit="cover" />
                </div>
                <div class="d-lkb-u">
                    <div class="app-p-i-b-csa">
                        <ul class="app-p-i-b" :style="{ width: imglist.length * 1.7 + 'rem' }">
                            <li v-for="(i, index) in imglist" :key="i.id" :class="imgInx == index ? 'ibd' : 'ibds'"
                                @click.stop="preSin(i, index)">
                                <video v-if="$wlsf.filiv(i.accessorySrc) == 4"
                                    :src="i.discernPath == null ? i.accessorySrc : i.discernPath"></video>
                                <img v-else :src="i.discernPath == null ? i.accessorySrc : i.discernPath" alt="">

                                <div class="app-p-i-b-li" v-if="i.starsStatus == 1"
                                    style="top: 0.04rem; left: 0.04rem;color: #FCC80F;">
                                    <i class="icon iconfont icon-shoucang"></i>
                                </div>

                                <div class="app-p-i-b-li pibli " :class="i.status == 'IDENTIFY' ? 'ili' : 'ilis'"
                                    style="right: 0;">
                                    <span v-if="i.status == 'WAITING'">未处理</span>
                                    <span v-if="i.status == 'IDENTIFY'">已鉴定</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="loadMore" @click.stop="load">
                        <img style="width: 56px;height: 60px;" :src="lms" alt="">
                        <div style="text-align: center;color: #fff;">
                            <span>{{ imglist.length }}</span> / <span>{{ total.length }}</span>
                        </div>
                    </div>
                </div>

                <div class="wls-authenticate-container-left-group" v-if="grp">
                    <el-button type="primary" @click.stop="Previousgroup()">上一组</el-button>
                    <span style="margin: 0 .24rem;font-size: 0.18rem;">{{ ifox }}/{{ allifox }}</span>
                    <el-button type="primary" @click.stop="Nextgroup()">下一组</el-button>

                </div>

            </div>
            <div class="wls-authenticate-container-right">
                <div class="wls-authenticate-container-right-v bcb">
                    <div class="wdct">
                        <span>基本信息</span>
                    </div>
                    <el-form :model="imgObj" label-position="left" label-width="80px" size="large">
                        <el-form-item label="照片名称">
                            <el-input v-model="imgObj.imageName" />
                        </el-form-item>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="拍摄时间">
                                    <el-date-picker style="width: 100%;" v-model="imgObj.shootingTime" type="datetime"
                                        placeholder="请选择拍摄时间" format="YYYY/MM/DD HH:mm:ss" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="鉴定人">
                                    <el-select style="width: 100%;" v-model="imgObj.identifyPeople" class="m-2"
                                        placeholder="请选择鉴定人">
                                        <el-option v-for="w in Worker" :key="w[0]" :label="w[1]" :value="w[0]" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div style="height: 0.16rem;"></div>
                <div class="wls-authenticate-container-right-v bcb">
                    <div class="wacr">
                        <div>
                            <span style="font-size: 0.18rem;font-weight: 700;">鉴定</span>
                            <!-- <svg class="wls-icon" aria-hidden="true" style="margin: 0 .08rem 0 0.16rem;">
                                <use xlink:href="#icon-tianjia1"></use>
                            </svg> -->
                            <i style="color: var(--wls-color);" class="icon iconfont icon-tianjia1"></i>
                            <span @click.stop="addsn" style="color: var(--wls-color);cursor: pointer;">添加物种</span>
                        </div>
                        <div style="display: flex;align-items: center;">
                            <span style="margin-right: 0.08rem;color: #F84848;">无法鉴定</span>
                            <el-checkbox v-model="checked1" label="" size="large" />
                        </div>
                    </div>
                    <div class="wacr-waring">
                        <svg class="wls-icon" aria-hidden="true" style="margin: 0 .08rem 0 0.16rem;">
                            <use xlink:href="#icon-jiandingtishi"></use>
                        </svg>
                        <span style="margin: 0 0.24rem 0 0.08rem;">AI鉴定结果(仅供参考)</span>
                        <span style="color: #606266;" v-if="imgObj.discernName == null">暂无鉴定结果</span>
                        <span v-else style="color: #606266;">
                            <span v-for="(item, index) in imgObj.discernName.split('#')"> {{ item }}、</span>
                        </span>
                    </div>

                    <div class="wacr-jd scol">
                        <!-- 新增 B-->
                        <el-form v-for="(i, index) in speciesList" v-if="!checked1" label-position="right"
                            label-width="70px" size="large"
                            style="border-bottom: 1px solid #DCDFE6;margin-top: .16rem;">
                            <el-row :gutter="10">
                                <el-col :span="8">
                                    <el-form-item label="物种名称">
                                        <el-select v-model="i.speciesName" filterable remote reserve-keyword
                                            placeholder="填选物种名" remote-show-suffix :remote-method="remoteMethod"
                                            :loading="loading">
                                            <el-option v-for="(item, x) in options" :key="'item' + x" :label="item"
                                                :value="item" @click.stop="handleSelects(item, index)" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="拉丁名">
                                        <el-input style="width: 100%;" class="wls-italic" v-model="i.lan" disabled
                                            placeholder="拉丁名自动显示" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="数量">
                                        <el-input style="width: 100%;" type="number" v-model="i.animalNum"
                                            placeholder="输入数量(阿拉伯数字)" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="2">
                                    <svg class="wls-icon" v-if="index > 0" aria-hidden="true"
                                        @click.stop="deljdwz(i, index)"
                                        style="width: 40px;height: 40px;cursor: pointer;">
                                        <use xlink:href="#icon-jiandingwuzhongshanchu"></use>
                                    </svg>
                                </el-col>
                            </el-row>
                        </el-form>
                        <!-- 新增 E-->
                    </div>
                    <!-- 鉴定B -->
                    <div class="wacr-jd-btn">
                        <el-button type="primary" @click.stop="submitms(1)"
                            style="margin-right: 0.48rem;">确认单张鉴定结果</el-button>
                        <el-button v-if="isempty" type="primary" @click.stop="submitms(0)">确认整组鉴定结果</el-button>
                    </div>
                    <!-- 鉴定E -->
                </div>
            </div>
        </div>

        <wls-collect ref="coll" @submitfl="iscollect"></wls-collect>
    </div>
</template>

<style scoped>
.wls-authenticate {
    width: 100%;
    height: 100%;
    padding: .06rem;
    background-color: #F5F7FA;
    overflow: hidden;
}


.wls-authenticate-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .1rem .1rem 0 .1rem;
    margin-bottom: 0.06rem;
}

.wls-authenticate-title-txt {
    display: flex;
    align-items: center;
    color: #AAA;
}


.wls-authenticate-title-txt>span:nth-child(2) {
    transform: rotate(-90deg);
    margin: 0 0.08rem;
}

.wls-authenticate-title-txt>span:nth-child(3) {
    color: #333;
    font-weight: 700;
}

.wls-authenticate-container {
    width: 100%;
    height: calc(100% - .5rem);
    padding: 0.1rem;
    display: flex;
    overflow: hidden;
}

.wls-authenticate-container>div {
    flex: 1;
    height: 100%;
    flex-wrap: nowrap;
    overflow: hidden;
}

.wls-authenticate-container-left {
    padding: 0.24rem;
}

.wls-authenticate-container-left-img {
    width: 100%;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #000;
    overflow: hidden;
}


.wls-authenticate-container-left-img img {
    width: 100%;
    height: 100%;
}

.wls-authenticate-container-left-img video {
    max-width: 100%;
    max-height: 100%;
}

.wls-authenticate-container-left-btn {
    height: 0.42rem;
    color: #fff;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0.16rem;
    left: 0.16rem;
    z-index: 2;
    cursor: pointer;
}

.wls-authenticate-container-left-btn>div {
    width: 1.1rem;
    height: 0.42rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.16rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.60);
}

.wls-authenticate-container-left-btn span {
    margin-left: 0.08rem;
}

.wls-collect {
    position: relative;
}

.wls-collect-list {
    /* width: 2rem; */
    padding: 0 .16rem;
    border-radius: 4px;
    background-color: #fff;
    position: absolute;
    top: 0.5rem;
    left: 0;
    z-index: 3;
    overflow: hidden;
}

.wls-authenticate-container-left-arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    cursor: pointer;
}

.d-lkb-u {
    width: 100%;
    height: 1.3rem;
    display: flex;
    position: relative;
    margin: 0.24rem 0;
    overflow: hidden;
}

.app-p-i-b {
    height: 1.2rem;
    /* position: absolute;
    top: 0;
    left: 0; */
    overflow: hidden;
}

.app-p-i-b li {
    float: left;
    width: 1.5rem;
    height: 1.2rem;
    margin-right: .16rem;
    border-radius: 0.04rem;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #000;
    cursor: pointer;
}

.app-p-i-b img {
    width: 100%;
    height: 100%;
}

.app-p-i-b video {
    width: 100%;
    max-width: 100%;
}

.app-p-i-b-csa {
    width: calc(100% - 1.2rem);
    height: 100%;
    padding: 8px 0;
    overflow-y: hidden;
    overflow-x: auto;
}

.loadMore {
    width: 1rem;
    height: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    /* margin-top: 8px; */
    margin-left: .16rem;
    border-radius: 8px;
    background-color: #387bff;
}

.ibd {
    border: 3px solid var(--wls-color);
}

.ibds {
    border: 1px solid #DCDFE6;
}


.app-p-i-b-li {
    position: absolute;
    top: 0;
    z-index: 2;
}

.pibli {
    width: .8rem;
    height: .32rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    border-radius: 0px 0px 0px 0.04rem;
}

.ili {
    background-color: var(--wls-color);
}

.ilis {
    background: #FCC80F;
}

.wls-authenticate-container-left-group {
    width: 100%;
    height: calc(100% - 7.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #DCDFE6;
}

.wls-authenticate-container-right {
    margin-left: 0.16rem;
    position: relative;
    overflow: hidden;
}

.wls-authenticate-container-right-v {
    padding: .24rem;
    overflow: hidden;
}

.wacr {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wacr-waring {
    width: 100%;
    height: 0.56rem;
    font-size: 0.18rem;
    margin: 0.16rem 0;
    display: flex;
    align-items: center;
    background: rgba(252, 214, 15, 0.10);
}

.wacr-jd {
    width: 100%;
    height: 4.17rem;
}

.wacr-jd-btn {
    margin-top: 0.2rem;
    width: 100%;
    height: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

<style>
/* .el-radio {
    width: 2rem;
    height: .5rem !important;
    margin-right: 0 !important;
    border-bottom: 1px solid #DCDFE6;
}

.el-radio:last-child {
    border: none;
} */

.wls-italic .el-input__inner {
    font-style: italic;
}
</style>